<template>
    <div>
        <basic-layout title="常见问题" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 查询条件 -->
                <van-row class="search-row">
                    <van-search v-model="formData.guideKeyword" maxlength="20" show-action label="" placeholder="问题标题 / 问题描述" @search="onRefresh">
                        <template #action>
                            <div @click="onRefresh">搜索</div>
                        </template>
                    </van-search>
                </van-row>
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            :finished-text="listData.length ? '没有更多了' : ''"
                            @load="onLoad"
                        >
                            <van-swipe-cell v-for="val in listData" :key="val.guideId">
                                <div class="cellContent" @click="handleDetail(val)">
                                    <div class="top">
                                        <p class="title">{{ val.guideTitle }}</p>
                                        <p>
                                            <span class="label">问题描述：</span>
                                            {{ val.guideDesc }}
                                        </p>
                                        <p>
                                            <span class="label">问题解答：</span>
                                            <span>{{ val.guideAnswer }}</span>
                                        </p>
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
    </div>
</template>

<script>
    import { queryAssistGuide } from '@/api/platframe/problem';
    export default {
        data () {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                formData: {
                    guideKeyword: '',
                    guideType: '1',
                    pageNum: 1,
                    pageSize: 20
                },
                listData: []
            };
        },
        created () {
            this.getListData();
        },
        methods: {
            // 获取列表数据
            getListData () {
                if (this.formData.guideKeyword && !this.$commonReg.textReg.test(this.formData.guideKeyword)) {
                    this.$Notify({ type: "warning", message: `关键字${this.$commonReg.textMsg}` });
                    return;
                }
                this.loading = true;
                queryAssistGuide(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 查看详情
            handleDetail (item) {
                this.$router.push({ path: `/problem/detail?guideId=${item.guideId}`});
            },
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            padding: 10px;
            box-sizing: border-box;
            .title {
                font-size: 14px;
            }
        }
    }
</style>